<!-- map管理 -->
<template>
  <!--  <div class='amap-page-container'>
      <div :style="{width:'100%',height:'800px'}">
            <el-amap vid='amap' :plugin='plugin' class='amap-demo' :center='center'>
            </el-amap>
          </div>
          <div class='toolbar'>
              <span v-if='loaded'>
                location: lng = {{ lng }} lat = {{ lat }}
              </span>
            <span v-else>正在定位</span>
          </div>
          <div v-on:click='getLocation()'>
            查询周边
          </div>
    </div>-->
  <div class='amap-page-container'>
    <div :style="{width: '100%',height: '800px'}">
      <el-amap
          :plugin='plugin'
          :center='center'
          :zoom='zoom'
          class='amap-demo'>
        <el-amap-marker v-for='marker in markers'
                        :position='marker.position'
                        :key='marker.id'
                        :events='marker.events'
                        :icon="'/static/police.png'">
        </el-amap-marker>
        <el-amap-info-window v-if='window'
                             :position='window.position'
                             :visible='window.visible'
                             :content='window.content'
                             :offset='window.offset'>
        </el-amap-info-window>
      </el-amap>
    </div>
    <div :style="{width:'100%',height:'200px'}">
      <input type='text' ref='searchText' id='searchText' @keyup='keyUpSearch' placeholder='请输入地址' />
      <div class='address_items' id='address_result' v-if='searchData.length > 0'>
        <div class='address_item' v-for='item in searchData'>
          <div class='description' @click='clickPostion(item)'>{{ item.pname }}{{ item.cityname }}{{ item.address }}</div>
        </div>
      </div>
    </div>
    <div id='temp' style='display:none'></div>
  </div>
</template>

<script>

export default {
  data() {
    const self = this;
    return {
      zoom: 12,
      searchData: [],
      center: [113.883107, 22.590993],
      pointMarker: [],
      markers: [],
      windows: [],
      window: '',
      loaded: true,
      plugin: [{
        enableHighAccuracy: true,     //是否使用高精度定位，默认:true
        timeout: 100,                 //超过10秒后停止定位，默认：无穷大
        maximumAge: 0,                //定位结果缓存0毫秒，默认：0
        convert: true,                //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
        showButton: true,             //显示定位按钮，默认：true
        buttonPosition: 'RB',         //定位按钮停靠位置，默认：'LB'，左下角
        showMarker: true,             //定位成功后在定位到的位置显示点标记，默认：true
        showCircle: true,             //定位成功后用圆圈表示定位精度范围，默认：true
        panToLocation: true,          //定位成功后将定位到的位置作为地图中心点，默认：true
        zoomToAccuracy: true,         //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：f
        extensions: 'all',
        pName: 'Geolocation',
        events: {
          init(o) {
            // o 是高德地图定位插件实例
            o.getCurrentPosition((status, result) => {
              console.log(result);
              if (result && result.position) {
                self.lng = result.position.lng;
                self.lat = result.position.lat;
                self.center = [self.lng, self.lat];
                self.loaded = true;
                self.$nextTick();
              }
            });
          }
        }
      }]
    };
    /*return {
      // center: [-121.59996, -31.197646],
      center: [0, 0],
      lng: 0,
      lat: 0,
      loaded: false,
      plugin: [{
        enableHighAccuracy: true,     //是否使用高精度定位，默认:true
        timeout: 100,                 //超过10秒后停止定位，默认：无穷大
        maximumAge: 0,                //定位结果缓存0毫秒，默认：0
        convert: true,                //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
        showButton: true,             //显示定位按钮，默认：true
        buttonPosition: 'RB',         //定位按钮停靠位置，默认：'LB'，左下角
        showMarker: true,             //定位成功后在定位到的位置显示点标记，默认：true
        showCircle: true,             //定位成功后用圆圈表示定位精度范围，默认：true
        panToLocation: true,          //定位成功后将定位到的位置作为地图中心点，默认：true
        zoomToAccuracy: true,         //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：f
        extensions: 'all',
        pName: 'Geolocation',
        events: {
          init(o) {
            // o 是高德地图定位插件实例
            o.getCurrentPosition((status, result) => {
              console.log(result);
              if (result && result.position) {
                self.lng = result.position.lng;
                self.lat = result.position.lat;
                self.center = [self.lng, self.lat];
                self.loaded = true;
                self.$nextTick();
              }
            });
          }
        }
      }]
    };*/
  },
  created() {
    this.point();
  },
  methods: {
    req_post() {

    },
    point() {
      let markers = [];
      let windows = [];
      let that = this;
      this.pointMarker.forEach((item, index) => {
        markers.push({
          position: [item.lng, item.lat],
          icon: item.icon,
          events: {
            click() {
              that.windows.forEach(window => {
                window.visible = false;
              });
              that.window = that.windows[index];
              that.$nextTick(() => {
                that.window.visible = true;
              });
            }
          }
        });
        windows.push({
          position: [item.lng, item.lat],
          content: '<div class="windows-text">' + '<div class="text-map">' +
              '<p>' + '烟感报警-方形测试' + '</p>' +
              '报警状态：' + item.status + '<br>' +
              '报警时间：' + item.time + '<br>' +
              '联系人：' + item.linkman + '<br>' +
              '联系电话：' + item.phone + '<br>' +
              '设备名称：' + item.equipment + '<br>' +
              '烟感环境温度：' + item.temp + '<br>' +
              '发现地址：' + item.site + '<br>' + '<div class="bottom">' +
              '<button onclick="getVideo()">' + '查看视频' + '</button>' + '</div>' + '</div>' + '</div>',
          offset: [5, -15],
          visible: false
        });
      });
      //  加窗体
      this.markers = markers;
      // 加弹窗
      this.windows = windows;
    },
    clickPostion(item) {
      self.lng = item.location.lng;
      self.lat = item.location.lat;
      self.center = [self.lng, self.lat];
      self.loaded = true;
    },
    keyUpSearch() {
      var _this = this;
      var txt = this.$refs.searchText.value;
      AMap.service(['AMap.PlaceSearch'], function() {
        var placeSearch = new AMap.PlaceSearch({
          //构造地点查询类
          pageSize: 12,
          pageIndex: 1,
          city: '010'
          //城市
          // cityLimit: 'true',
          // panel: 'temp'
          // 搜索结果的展示面板对元素id，不知道为什么一定要有该参数，最终获取的结果才更完整，参数更多跟完整，
          //所以我在页面随便写了一个<div id="temp" style="display:none"></div>
        });
        //关键字查询
        placeSearch.search(txt, function(status, result) {
          console.log(result);
          console.log(status);
          if (status == 'complete' && result.info == 'OK') {
            //这里可以console.log(result)，查看所有返回的参数，遍历展示这些基本的，我就不赘述
            _this.searchData = result.poiList.pois;
            console.log(result);
          }
        });
      });

      /*AMap.service(['AMap.PlaceSearch'], function() {//回调函数
        //实例化PlaceSearch
        console.log('1111111111111111111111');
        var placeSearch = new AMap.PlaceSearch({
          pageSize: 5,    //每页显示多少行
          pageIndex: 1,   //显示的下标从那个开始
          // type: '餐饮服务', //类别，可以以|后面加其他类
          city: '010',    //城市
          // map: map,       //显示地图
          panel: 'temp'   //服务显示的面板
        });
        //TODO: 使用placeSearch对象调用关键字搜索的功能
        console.log('222222222222222');
        placeSearch.search('公园', function(status, result) {
          console.log(status);
          console.log(result);
        });
      });*/
    }
  }

};
</script>

<style>
.amap-page-container {
  width: 100%;
  height: 800px;
}

.amap-demo {
  width: 100%;
  height: 775px;
}
</style>
